import { defineComponent, PropType } from "vue";
import "./index.scss";
import { StatusEnum } from "./statusEnums";

const tagsComponent = defineComponent({
  props: {
    dataValue: {
      type: String,
      default: () => ""
    },
    type: {
      type: String as PropType<keyof typeof StatusEnum>,
      default: ""
    },
    textColor: {
      type: String,
      default: ""
    },
    bgColor: {
      type: String,
      default: ""
    }
  },
  setup(props) {
    const dynamicStyles = {
      color: props.textColor,
      backgroundColor: props.bgColor
    };

    return () => (
      <span class={["baseTags", props.type && StatusEnum[props.type]]} style={[dynamicStyles]}>
        {props?.dataValue}
      </span>
    );
  }
});

export default tagsComponent;
